<template>
	<view class="content">
		<view class="deviceForm">
			<view class="addBtn" @click="addFloorInfo">
				添加楼层信息
			</view>
			
			<view class="devWrap">				
				<view class="devli">
					<view class="devLabel">
						楼号：
					</view>
					<view class="devInput">
						<u--input
						  placeholder="请选择楼号"
						  inputAlign="right"
						  placeholderStyle="color:#979797;font-size: 30rpx;"
						  readonly
						  @click.native="showFloorFirst"
						  :customStyle="inputStyle"
						  border="none"
						  suffixIcon="arrow-right"
						  suffixIconStyle="font-size: 28rpx;"
						  v-model="formData.floorTxt"
						></u--input>
						
					</view>
				</view>
				
				<view class="devli">
					<view class="devLabel">
						楼层：
					</view>
					<view class="devInput">
						  <u--input
						    placeholder="请选择楼层"
							inputAlign="right"
							placeholderStyle="color:#979797;font-size: 30rpx;"
							readonly
							@click.native="showFloor"
							:customStyle="inputStyle"
						    border="none"
							suffixIcon="arrow-right"
							suffixIconStyle="font-size: 28rpx;"
						    v-model="formData.roomNoTxt"
						  ></u--input>
					</view>
				</view>
				
				<view class="devli">
					<view class="devLabel">
						房间名称：
					</view>
					<view class="devInput">
						<u--input
						  placeholder="请选择房间名称"
						inputAlign="right"
						placeholderStyle="color:#979797;font-size: 30rpx;"
						readonly
						@click.native="showFloorThird"
						:customStyle="inputStyle"
						  border="none"
						  suffixIcon="arrow-right"
						  suffixIconStyle="font-size: 28rpx;"
						  v-model="formData.roomNameTxt"
						></u--input>
						<!-- <input type="text" v-model="formData.roomName" placeholder="请输入"> -->
					</view>
				</view>
			</view>
			
			<view class="devWrap">
				<view class="devli">
					<view class="devLabel">
						设备名称：
					</view>
					<view class="devInput">
						<input type="text" v-model="formData.deviceName" placeholder="请输入">
					</view>
				</view>
				
				<view class="devli">
					<view class="devLabel">
						设备品牌：
					</view>
					<view class="devInput">
						<input type="text" v-model="formData.brand" placeholder="请输入">
					</view>
				</view>
				
				<view class="devli">
					<view class="devLabel">
						设备功率：
					</view>
					<view class="devInput">
						<input type="text" v-model="formData.devicePower" placeholder="请输入">
					</view>
				</view>
				
				<view class="devli">
					<view class="devLabel">
						设备形式：
					</view>
					<view class="devInput">
						<u--input
						  placeholder="请选择"
							inputAlign="right"
							placeholderStyle="color:#979797;font-size: 30rpx;"
							readonly
							@click.native="showCategy"
							:customStyle="inputStyle"
							border="none"
							suffixIcon="arrow-right"
							suffixIconStyle="font-size: 28rpx;"
							v-model="formData.categoryName"
							></u--input>
						<!-- <input type="text" placeholder="请输入"> -->
					</view>
				</view>
				
				<view class="devli">
					<view class="devLabel">
						巡检分类：
					</view>
					<view class="devInput">
						<u--input
						  placeholder="请选择"
							inputAlign="right"
							placeholderStyle="color:#979797;font-size: 30rpx;"
							readonly
							@click.native="chooseInspect"
							:customStyle="inputStyle"
							border="none"
							suffixIcon="arrow-right"
							suffixIconStyle="font-size: 28rpx;"
							v-model="formData.inspectType"
							></u--input>
						<!-- <input type="text" placeholder="请输入"> -->
					</view>
				</view>
				
			</view>
			
			<view class="devWrap">
				<view class="devli">
					<view class="devLabel">
						设备数量：
					</view>
					<view class="devInput">
						<input type="number" v-model="formData.quantity" placeholder="请输入">
					</view>
				</view>
				
				<view class="devli">
					<view class="devLabel">
						设备编号：
					</view>
					<view class="devInput">
						<u-input
						  placeholder="请输入设备编号"
						  inputAlign="right"
						  placeholderStyle="color:#979797;font-size: 30rpx;"
						  :customStyle="inputStyle"
						  border="none"
						  v-model="formData.deviceCode" 
						>
							<u-button slot="suffix" @tap="showScanTwo(2)" text="扫码" type="primary" size="mini"></u-button>
						</u-input>
						<!-- <input type="text" v-model="formData.deviceCode" @click.native="showScan(2)" placeholder="请输入"> -->
					</view>
				</view>
				
				<view class="devli">
					<view class="devLabel">
						机器型号：
					</view>
					<view class="devInput">
						<u-input
						  placeholder="请输入机器型号"
						  inputAlign="right"
						  placeholderStyle="color:#979797;font-size: 30rpx;"
						  :customStyle="inputStyle"
						  border="none"
						  v-model="formData.model" 
						>
							<u-button slot="suffix" @tap="showScanTwo(1)" text="扫码" type="primary" size="mini"></u-button>
						</u-input>
						<!-- <input type="text" v-model="formData.model" @click.native="showScan(1)" placeholder="请输入"> -->
					</view>
				</view>
				
				<view class="devli">
					<view class="devLabel">
						出厂日期：
					</view>
					<view class="devInput">
						<u--input
						  placeholder="请选择"
						  inputAlign="right"
						  placeholderStyle="color:#979797;font-size: 30rpx;"
						  readonly
						  @click.native="showDate"
						  suffixIconStyle="font-size: 28rpx;"
						  :customStyle="inputStyle"
						  border="none"
						  suffixIcon="arrow-right"
						  v-model="formData.manufactureDate"
						></u--input>
					</view>
				</view>
			</view>
			
			<view class="devWrap">
				<view class="remarkContent">
					<text>备注</text>
					<textarea v-model="formData.remark"></textarea>
				</view>
			</view>	
			
		</view>
		
		<view class="baseBottom">
			<view class="cancelBtn" @click="cancelForm">
				取消
			</view>
			<view class="sureBtn" @click="goForm">
				确定
			</view>
		</view>
		
		<u-picker :show="isType" :columns="typeList" keyName="categoryName" @cancel="isType = false" @confirm="confirmType"></u-picker>
		<u-picker :show="show" :columns="columns" keyName="companyRoom" @cancel="show = false" @confirm="confirmFloor"></u-picker>
		<u-picker :show="isSecond" :columns="secondList" keyName="companyRoom" @cancel="isSecond = false" @confirm="confirmFloorTwo"></u-picker>
		<u-picker :show="isThird" :columns="thirdList" keyName="companyRoom" @cancel="isThird = false" @confirm="confirmFloorThree"></u-picker>
		<u-picker :show="isXun" title="巡检分类" :columns="xunTypeList" @cancel="isXun = false" @confirm="confirmXunInfo"></u-picker>
		
		<u-datetime-picker :show="isDate" v-model="currentDate" mode="date"
			 @cancel="isDate = false" @confirm="confirmDate"></u-datetime-picker>
		
		<addFloor ref="addFloor" @showForm="showForm"></addFloor>	 
				
	</view>
</template>

<script>
	import { getCategory, getFloorList, addDeviceinfo } from '@/api/login.js';
	import addFloor from '@/components/addFloor.vue';
	export default {
		components:{
			addFloor
		},
		data() {
			return {
				show: false,
				isSecond: false,
				isXun: false,
				isThird: false,
				isDate: false,
				xunTypeList: [['分体式、多联式空调室内机巡检','分体式、多联式空调室外机巡检','风冷热泵冷水机组室外机巡检',
							 '循环泵机组巡检']],
				currentDate: Number(new Date()),
				columns: [],
				isType: false,
				typeList: [],
				secondList: [],
				thirdList: [],
				formData:{
					brand: '',
					categoryId: '',
					categoryName: '',
					deviceCode: '',
					deviceName: '',
					devicePower: '',
					floor: '',
					manufactureDate: '',
					model: '',
					quantity: '',
					roomName: '',
					enterpriseId:'',
					model: '',
					roomNo: '',
					remark: '',
					roomNameTxt: '',
					floorTxt: '',
					roomNoTxt: ''
				},
				inputStyle:{
					'font-size':'30rpx',
					'color':'#333',
					'text-align': 'right',
					'height':'112rpx',
					'line-height':'112rpx',
				}
			}
		},
		onShow() {
			let pages = getCurrentPages();
			let currPage = pages[pages.length - 1]; // 当前页的实例
			if(currPage.$vm.result != undefined ) {
				if(uni.getStorageSync('ctype') == 1) {
					this.formData.model = currPage.$vm.result;
				} else {
					this.formData.deviceCode = currPage.$vm.result;
				}
			}	
		},
		methods: {
			chooseInspect(){
				this.isXun = true;
			},
			// 选择巡检分类
			confirmXunInfo(val) {
				this.formData.inspectType = val.value[0];
				this.isXun = false;
			},
			cancelForm(){
				uni.navigateBack({delta:1})
			},
			goForm(){
				if(this.formData.roomNo == ''){
					return uni.$u.toast('请输入楼号。');
				}
				if(this.formData.deviceName == ''){
					return uni.$u.toast('请输入设备名称。');
				}
				if(this.formData.categoryName == '') {
					return uni.$u.toast('请选择设备形式。');
				}
				if(this.formData.quantity == ''){
					return uni.$u.toast('请输入设备数量。');
				}
				console.log(this.formData);
				addDeviceinfo(this.formData).then(res=>{
					if(res.code == 200) {
						uni.$u.toast('操作成功!');
						let pages = getCurrentPages();
						let prevPage = pages[pages.length - 2]; //上一页页面实例
						prevPage.$vm.value = 1;
						prevPage.$vm.deviceInfo = res.data;
						uni.navigateBack({
							delta: 1
						});
					} else {
						uni.$u.toast(res.msg);
					}
				})
			},
			showCategy(){
				getCategory({type: 0}).then(res=>{
					let newArr = [];
					res.rows.forEach(item=>{
						let objj = {
							categoryName: item.categoryName,
							id: item.id
						};
						newArr.push(objj)
					});
					this.typeList = [newArr];
					this.isType = true;
				});	
			},
			showScanTwo(type) {
				uni.setStorageSync('ctype',type);
				this.openCamera('scanCode',type);
			},
			showScan(type){
				uni.scanCode({
					scanType: ["qrCode"],
					success: (res) => {
						if (res.result) {
							if(type == 1) {
								this.formData.deviceCode = res.result;
							} else {
								this.formData.model = res.result;
							}
							
						} else {
							uni.$u.toast('请重新扫描!');
							return false;
						}	
					},
					fail: (res) => {
						uni.$u.toast('未识别到二维码!');
					}
				});	
			},
			confirmType(val){
				console.log(val.value[0])
				this.formData.categoryId = val.value[0].id;
				this.formData.categoryName = val.value[0].categoryName;
				this.isType = false;
			},
			showDate(){
				this.isDate = true;
			},
			showFloorThird(){
				this.isThird = true;
			},
			showForm(){
				// this.showFloorFirst();
			},
			addFloorInfo(){
				this.$nextTick(()=>{
					this.$refs['addFloor'].showInfo();
				});
			},
			showFloorFirst(type) {
				console.log(uni.getStorageSync('userInfo').companyId,'====1234');
				getFloorList({companyId: uni.getStorageSync('userInfo').companyId}).then(res=>{
					if(res.data.length > 0) {
						console.log(this.listToTreeSimple(res.data));
						let treeList = this.listToTreeSimple(res.data);
						let newArr = [];
						treeList.forEach(item=>{
							let objj = {
								companyRoom: item.companyRoom + item.otherName,
								companyId: item.companyId,
								id: item.id,
								companyName: item.companyName,
								children: item.children
							};
							newArr.push(objj)
						});
						this.columns = [newArr];
						this.show = true;
					} else {
						
					}
				});
			},
			showFloor(){
				// this.showFloorFirst(1);
				this.isSecond = true;
			},
			uniqueFun(arr,type) {
			  const res = new Map();
			  return arr.filter((a)=>!res.has(a[type])&& res.set(a[type],1));
			},
			listToTreeSimple(data) {
			  const res = [];
			  data.forEach((item) => {
			    const parent = data.find((node) => node.id === item.parentId);
			    if (parent) {
			      parent.children = parent.children || [];
			      parent.children.push(item);
			    } else {
			      // * 根节点
			      res.push(item);
			    }
			  });
			  return res;
			},
			confirmFloorThree(val) {
				this.formData.roomNameTxt = val.value[0].companyRoom;
				this.formData.roomName = val.value[0].id;
				this.isThird = false;
			},
			confirmFloorTwo(val) {
				this.formData.roomNoTxt = val.value[0].companyRoom;
				this.formData.roomNo = val.value[0].id;
				if(val.value[0].children != undefined) {
					if(val.value[0].children.length > 0) {
						let zuzu = this.uniqueFun(val.value[0].children,'id');
						let newArr = [];
						zuzu.forEach(item=>{
							let objj = {
								companyRoom: item.companyRoom + item.otherName,
								companyId: item.companyId,
								id: item.id,
								companyName: item.companyName,
								children: item.children
							};
							newArr.push(objj)
						});
						this.thirdList = [newArr];
					} else {
						this.thirdList = [];
					}
				} else {
					this.thirdList = [];
				}	
				this.isSecond = false;
			},
			confirmFloor(val){
				console.log(val);
				this.formData.enterpriseId = val.value[0].companyId;
				this.formData.floorTxt = val.value[0].companyRoom;
				this.formData.floor = val.value[0].id;
				if(val.value[0].children != undefined) {
					if(val.value[0].children.length > 0) {
						let zuzu = this.uniqueFun(val.value[0].children,'id');
						let newArr = [];
						zuzu.forEach(item=>{
							let objj = {
								companyRoom: item.companyRoom + item.otherName,
								companyId: item.companyId,
								companyName: item.companyName,
								otherName: item.otherName,
								id: item.id,
								children: item.children
							};
							newArr.push(objj)
						});
						this.secondList = [newArr];
					} else {
						this.secondList = [];
					}
				} else {
					this.secondList = [];
				}
				this.show = false;
			},
			confirmDate(val){
				this.formData.manufactureDate = uni.$u.timeFormat(val.value, 'yyyy-mm-dd');
				this.isDate = false;
			},
			openCamera(mode,type) {
				console.log(type)
				const {
					cameraAuthorized,
					microphoneAuthorized,
					osName
				} = uni.getSystemInfoSync()
			
				if (!cameraAuthorized) {
					uni.showModal({
						title: '提示',
						content: '您关闭了摄像头权限，请允许微信使用摄像头权限',
						confirmText: '去设置',
						success: (res)=> {
							if(res.confirm) {
								uni.openAppAuthorizeSetting()
							}
						}
					})
					return
				}
				// ios 摄像头&麦克风绑定
				if (!microphoneAuthorized && osName === 'ios') {
					uni.showModal({
						title: '提示',
						content: '您关闭了麦克风权限，请允许微信使用麦克风权限',
						confirmText: '去设置',
						success: (res)=> {
							if(res.confirm) {
								uni.openAppAuthorizeSetting()
							}
						}
					})
					return
				}
				uni.navigateTo({
					url:`/pages/index/camera?mode=${mode}&typeTwo=${type}`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.content{
	background-color:#F5F5F5;padding:16rpx 24rpx 188rpx;
	.baseBottom{
		position: fixed;bottom:0;left:0;width:100%;height:180rpx;background-color:#fff;
		backdrop-filter: blur(36rpx);z-index:999;@include flx;justify-content: space-between;
		.cancelBtn{
			width:336rpx;height:80rpx;background-color:#EFEFF1;text-align: center;
			@include baseFont(30rpx,#17181B,80rpx);margin:18rpx 0 0 24rpx;border-radius:68rpx;
		}
		.sureBtn{
			width:336rpx;height:80rpx;background: linear-gradient(90deg, #588FFF 0%, #3671E9 100%);text-align: center;
			@include baseFont(30rpx,#fff,80rpx);margin:18rpx 22rpx 0 0;border-radius:68rpx;
		}
	}
	.deviceForm{
		.addBtn{
			@include baseFont(30rpx,#fff,52rpx);text-align: center;margin:14rpx auto 25rpx;border-radius:34rpx;width:45%;
			background: linear-gradient( 90deg, #588FFF 0%, #3671E9 100%);padding:10rpx 15rpx;
		}
		.devWrap{
			background-color:#FFFFFF;border-radius:12rpx;margin-bottom:16rpx;
			.devli{
				@include flx;justify-content: space-between;padding:0 32rpx;border-bottom:1px solid #F0F0F0;
				.devLabel{
					@include baseFont(30rpx,#333,112rpx);width:25%;
				}
				.devInput{
					width:75%;
					input{
						display: block;@include baseFont(30rpx,#333,112rpx);height:112rpx;text-align: right;
					}
				}
			}
			.remarkContent{
				padding:32rpx;
				text{
					display: block;@include baseFont(30rpx,#262626,38rpx);margin-bottom:20rpx;
				}
				textarea{
					display: block;@include baseFont(30rpx,#262626,38rpx);background-color:#F6F6F6;
					border-radius:8rpx;width:calc(100% - 40rpx);height:110rpx;padding:20rpx;
				}
			}
		}
	}
}
</style>
